<template>
  <div class="app-container">
    <div id="faultLocationOne" style="width: 45%; height: 600px ;float:left" />
    <div style="width: 45%; height: 600px ;float:left">
      <basic-bar />
      <el-drawer
        :visible.sync="dialogVisible"
        direction="rtl"
        size="50%"
      >
        <fault-two
          v-if="dialogVisible"
          :fault-location-one="faultLocationOne"
        />
      </el-drawer>
    </div>
  </div>

</template>

<script>
import { getFaultOne } from '@/api/pie'
import FaultTwo from '@/views/fault_analysis/components/FaultTwo'
import BasicBar from '@/views/fault_analysis/components/BasicBar'

export default {
  name: 'FaultLocation',
  components: { BasicBar, FaultTwo },
  data() {
    return {
      myChart: '',
      dialogVisible: false,
      faultLocationOne: ''
    }
  },
  mounted() {
    this.initData()
    this.drawCharts()
  },
  methods: {
    drawChart() {
      const _this = this
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      this.myChart = this.$echarts.init(document.getElementById('faultLocationOne'))
      // 指定图表的配置项和数据
      this.myChart.setOption({
        title: {
          text: '故障一级位置总览表',
          left: 'center'
        },
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '位置 : {b} <br/>次数 : {c}次 ({d}%)'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            label: {
              show: false
            },
            itemStyle: {
              borderRadius: 5
            },
            data: []
          }
        ]
      })
      this.myChart.on('click', function(params) {
        _this.faultLocationOne = params.data.name
        _this.dialogVisible = true
      })
    },
    async initData() {
      getFaultOne().then(({ data }) => {
        this.myChart.setOption({
          series: [{
            data: data.list
          }]
        })
      })
    },
    drawCharts() {
      this.drawChart()
    },
    handleClose() {
      // 关闭弹窗
      this.dialogVisible = false
    }
  }
}

</script>

<style scoped>

</style>
